<!DOCTYPE html>
<!-- 219970720刘莹 -->
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		
		
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()" />
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
		
	</body>

		<script src="jQuery-3.6.4压缩文件/jquery-3.6.4.min.js"></script>
		<script>
			//$(document).ready(function(){
			//append():在被选元素的结尾插入指定内容。
				function addRow() {//增加一行
					var add=$("<tr>");
					add.append($("<td>幸福从天而降</td>"));
					add.append($("<td style='text-align:center'>&yen;18.50</td>"));
					$("table tr:eq(1)").after(add);
				}
				
				function updateRow() {//修改标题样式
					$("#row1").css({
						"fontWeight":"bold",
						"textAlign":"center",
						"backgroundColor": "#cccccc"
					});
				}
				
				function delRow() {//删除第二行
					$("tr").eq(2).remove();//eq(2):第二个tr
				}
				
				function copyRow() {//复制最后一行
					$("tr:last").clone().appendTo($("tr:last").parent());//clone() 方法生成被选元素的副本，包含子节点、文本和属性。
				}
			//});			
		</script>
</html